<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org "
 		xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="common::common(title='Welcome')">
</head>
<style type="text/css">
	body{
		margin:0;
	}
	iframe{
		width:100%;
		height:100%;
	}
	.el-tabs__content{
		width:100%;
		height:90%;
	}
	.el-tab-pane{
		width:100%;
		height:100%;
	}
	.el-menu-item-group__title{
		padding:0;
	}
	.el-tabs--border-card>.el-tabs__content{
		padding:0;
	}
</style>
<script type="text/javascript" th:src="@{/js/home.js?v=1}"></script>
<body>
<div id="layout">
	<el-container style="height: 100vh">
		<el-header style="padding:0">
			<el-menu  :default-active="0"
					  mode="horizontal"
					  @select=""
					  background-color="#545c64"
					  text-color="#fff"
					  active-text-color="#ffd04b">	
			  	<el-button type="text" style="padding:20px 0 0 20px;color:white" @click="collapseLeftMenu"> 
			  		<i class="iconfont" v-show="isCollapse">&#xe668;</i>
			  		<i class="iconfont" v-show="!isCollapse">&#xe66b;</i>
			  	</el-button>
			  <el-submenu index="0" style="float:right">
			    <template slot="title">
			    	<span sec:authentication="principal.nickName"></span>
			    </template>
			    <el-menu-item index="0-1" @click="updatePassword">修改密码</el-menu-item>
			    <el-menu-item index="0-2" @click="logout">退出</el-menu-item>
			  </el-submenu>
			</el-menu>
			
		</el-header>
		<el-container style="height:600px;">
			<el-aside :width="asideWidth" style="background:#EEEEEE;color:black">
				<el-menu
					default-active="0"
					@open=""
					@close=""
					background-color="#EEEEEE"
					active-text-color="#148CF1"
					:collapse="isCollapse">
					<el-submenu v-for="(item,index) in menuList" :index="index" >
					    <template slot="title">
					      <i :class="item.imgName?item.imgName:'el-icon-location'"></i>
					      <span slot="title">{{item.name}}</span>
					    </template>
					  	<el-menu-item-group v-for="(child,childIndex) in item.childs">
						    <el-menu-item :index="index+'-'+childIndex" @click="clickMenu(child)">
						    <i :class="child.imgName?child.imgName:'el-icon-location'"></i>
						    {{child.name}}
						    </el-menu-item>
      				   	</el-menu-item-group>
					</el-submenu>
			    </el-menu>
			</el-aside>
			<el-main style="padding:0;">
				<el-tabs v-model="selectedTab" type="border-card" @tab-remove="removeTab" style="height:99%;">
				  <el-tab-pane
				    v-for="(item, index) in tabs"
				    :key="item.name"
				    :label="item.title"
				    :name="item.name"
				    lazy
				    :closable="item.closable"
				  >
				  	<span slot="label" @contextmenu.prevent="contextmenu">{{item.title}}</span>
				    <iframe :src='item.content' frameborder="0" scrolling="yes"></iframe>
				  </el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
	</el-container>
</div>
</body>
</html>